<template>
	<view class="record-list-container">
		<!-- 头部筛选 -->
		<view class="filter-container">
			<picker mode="date" fields="month" @change="handleMonthChange">
				<view class="filter-item">
					<text>{{ selectedMonth || '选择月份' }}</text>
					<uni-icons type="calendar" size="18" color="#7fbc8d"></uni-icons>
				</view>
			</picker>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-card" v-if="statsData">
			<view class="stat-item">
				<text class="stat-value">{{ statsData.totalConsumption || '--' }}</text>
				<text class="stat-label">总油耗(L)</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{ statsData.totalCost || '--' }}</text>
				<text class="stat-label">总花费(元)</text>
			</view>
			<view class="stat-item">
				<text class="stat-value">{{ statsData.avgConsumption || '--' }}</text>
				<text class="stat-label">平均油耗</text>
			</view>
		</view>

		<!-- 记录列表 -->
		<scroll-view scroll-y class="list-container" @scrolltolower="loadMore" :refresher-enabled="true"
			:refresher-triggered="refreshing" @refresherrefresh="onRefresh">
			<view class="record-item" v-for="item in recordList" :key="item.id" @click="goToDetail(item.id)">
				<view class="item-left">
					<text class="record-date">{{ formatDate(item.refuelDate) }}</text>
				</view>
				<view class="item-right">
					<text class="record-amount">¥{{ item.amount }}</text>
					<text class="record-volume">{{ item.oilVolume }}L</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more">
				<uni-load-more :status="loadingStatus"></uni-load-more>
			</view>

			<!-- 空状态 -->
			<view class="empty-tip" v-if="!recordList.length && !loading">
				<image src="/static/empty-record.png" class="empty-image"></image>
				<text class="empty-text">暂无油耗记录</text>
				<button class="empty-btn" @click="goToAddRecord">去添加记录</button>
			</view>
		</scroll-view>

		<!-- 添加按钮 -->
		<view class="add-btn" @click="goToAddRecord">
		
			<image src="/static/icons/add.png" mode="aspectFit" style="width:30px;height:30px"></image>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	import dayjs from 'dayjs'
	import {
		getCurrentInstance
	} from 'vue'
	export default {
		setup() {
			const store = useStore()
			const loading = ref(false)
			const refreshing = ref(false)
			const loadingStatus = ref('more')
			const currentPage = ref(1)
			const pageSize = ref(15)
			const selectedMonth = ref(dayjs(new Date()).format('YYYY-MM'))
			
			const {
				proxy
			} = getCurrentInstance()
			// 数据
			const recordList = ref([])
			const statsData = ref(null)
	
			// 格式化日期
			const formatDate = (date) => dayjs(date).format('MM-DD')

			// 加载数据
			const loadData = async (reset = false) => {
				if (loading.value) return

				try {
					loading.value = true
					loadingStatus.value = 'loading'

					if (reset) {
						currentPage.value = 1
						recordList.value = []
					}

					const params = {
						page: currentPage.value,
						pageSize: pageSize.value,
						month: selectedMonth.value,
					}

					//const res = await store.dispatch('fetchRecords', params)
					const res = await proxy.$api.getRecords(params)
					if (res.code === 200) {
						recordList.value = [...recordList.value, ...res.data.list]
						statsData.value = res.data.stats
						if (res.data.list.length < pageSize.value) {
							loadingStatus.value = 'noMore'
						} else {
							loadingStatus.value = 'more'
							currentPage.value++
						}
					}
				} catch (error) {
					console.error('加载数据失败:', error)
				} finally {
					loading.value = false
					refreshing.value = false
				}
			}

			// 下拉刷新
			const onRefresh = () => {
				refreshing.value = true
				loadData(true)
			}

			// 加载更多
			const loadMore = () => {
				if (loadingStatus.value === 'noMore') return
				loadData()
			}

			// 月份筛选
			const handleMonthChange = (e) => {
				selectedMonth.value = e.detail.value
				loadData(true)
			}

			// 跳转详情
			const goToDetail = (id) => {
				uni.navigateTo({
					url: `/pages/record/add?id=${id}`
				})
			}

			// 添加记录
			const goToAddRecord = () => {
				uni.navigateTo({
					url: '/pages/record/add'
				})
			}

			// 初始化
			onMounted(() => {
				loadData()
			})

			return {
				loading,
				refreshing,
				loadingStatus,
				recordList,
				statsData,
				selectedMonth,
				formatDate,
				onRefresh,
				loadMore,
				handleMonthChange,
				goToDetail,
				goToAddRecord
			}
		}
	}
</script>

<style scoped>
	.record-list-container {
		padding: 20rpx;
		height: 100vh;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
	}

	.filter-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.filter-item {
		background-color: white;
		border-radius: 40rpx;
		padding: 12rpx 24rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.filter-item text {
		margin-right: 10rpx;
	}

	.stats-card {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #7fbc8d;
		display: block;
	}

	.stat-label {
		font-size: 26rpx;
		color: #999;
	}

	.list-container {
		flex: 1;
		height: 0;
	}

	.record-item {
		background-color: white;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.item-left {
		flex: 1;
	}

	.record-date {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.car-name {
		font-size: 26rpx;
		color: #999;
	}

	.item-right {
		display: flex;
		align-items: center;
	}

	.record-amount {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff6b6b;
		margin-right: 20rpx;
	}

	.record-volume {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.load-more {
		padding: 30rpx 0;
	}

	.empty-tip {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 100rpx;
	}

	.empty-image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}

	.empty-text {
		font-size: 30rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.empty-btn {
		background-color: #7fbc8d;
		color: white;
		width: 60%;
		border-radius: 50rpx;
		font-size: 30rpx;
	}

	.add-btn {
		position: fixed;
		right: 40rpx;
		bottom: 40rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #7fbc8d;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 12rpx rgba(127, 188, 141, 0.3);
	}
</style>